
import echarts from "@/utils/echarts";
import { getStaticCount } from "@/api/backend/count";
import EventEmiiter from "@/utils/EventEmiiter";
import i18n from "@/locales";
const { t } = i18n.global;

export async function generateMonthGraphConfig(id:number) {
    const currentLanguage = i18n.global.locale.value;
    const lineData:number[] = [];
    const barData:number[] = [];
    const rateData = new Array(12).fill(0);
    try {
        if(!id) throw new Error('缺乏Id');
        const { data, code, message } = await getStaticCount(id);
        if(code !== 200) throw new Error(message);
        (data?.monthCount ?? []).forEach(item => {
            lineData.push(item);
        });
        (data?.monthPay ?? []).forEach(item => {
            barData.push(item);
        });
    } catch (error) {
        EventEmiiter.emit('API:REQ_ERROR', error instanceof Error ? error.message : 'Service Error！')
    }
    const xAxis = currentLanguage === 'en' ? ['Jan','Feb','Mar','Apr','	May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'] : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
    for (var i = 0; i < 17; i++) {
        if(lineData[i] === 0){
            rateData[i] = 0;
        }else{
            const rate = barData[i] / lineData[i];
            rateData[i] = rate.toFixed(2);
        }
    }
    return {
        title: {
            text: `${new Date().getFullYear()}${t('echarts.monthCountPriceTitle')}`,
            x: 'center',
            y: 0,
            textStyle: {
                color: '#B4B4B4',
                fontSize: 16,
                fontWeight: 'normal',
            },

        },
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,0.1)',
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true,
                    backgroundColor: '#7B7DDC'
                }
            }
        },
        legend: {
            data: [t('echarts.monthCountPriceLehend1'), t('echarts.monthCountPriceLehend2'), t('echarts.monthCountPriceLehend3')],
            textStyle: {
                color: '#B4B4B4'
            },
            top: '7%',
        },
        grid: {
            x: '10%',
            width: '75%',
            y: '18%',
        },
        xAxis: {
            data: xAxis,
            axisLine: {
                lineStyle: {
                    color: '#B4B4B4'
                }
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: [{

            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: '#B4B4B4',
                }
            },

            axisLabel: {
                formatter: `{value} ${t('unit.rmb')}`,
            }
        },
        {

            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: '#B4B4B4',
                }
            },
            axisLabel: {
                formatter: `{value} ${t('unit.rmbEveryTime')}`,
            }
        }],

        series: [{
            name: t('echarts.monthCountPriceLehend1'),
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    color: '#F02FC2'
                },
            },
            data: rateData
        },

        {
            name: t('echarts.monthCountPriceLehend2'),
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#956FD4' },
                            { offset: 1, color: '#3EACE5' }
                        ]
                    )
                }
            },
            data: barData
        },

        {
            name: t('echarts.monthCountPriceLehend3'),
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: 'rgba(156,107,211,0.5)' },
                            { offset: 0.2, color: 'rgba(156,107,211,0.3)' },
                            { offset: 1, color: 'rgba(156,107,211,0)' }
                        ]
                    )
                }
            },
            z: -12,

            data: lineData
        },
        ]
    };
}